<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>枚举表管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="1200">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style>
        .table > tbody > tr > td {
            height: 48px;
            max-height: 44px;
            overflow: hidden;
        }
        .table > tbody > tr > td span {
            max-height: 44px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .saveModle {
            width: 500px;
            height: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -150px;
            background: #fff;
            border-radius: 10px;
            z-index: 1978;
            display: none;
            border: 1px solid #cfcfcf;
        }

        .saveModle .top {
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            padding-left: 7px;
            border-bottom: 1px solid #cfcfcf;
            background: #fff;
        }

        .saveModle .top .title {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            float: left;
            background: #fff;
        }

        .saveModle .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            display: inline-block;
            float: right;
        }

        .saveModle .top .btn:hover {
            color: red;
        }

        .saveModle .saveBtn {
            margin: 0 auto;
            margin-top: 35px;
            display: block;

        }

        /*#tbList tr:nth-child(odd){*/
        /*background-color:#ECFAFD;*/
        /*}*/
    </style>
</head>
<body>
<iframe id="ifExprot" style="width:0px;height:0px;display: none;" frameborder="0"></iframe>
<section class="content" id="app" v-cloak>
    <div id="dev" style="position:relative; top:10px;">


        <div class="pull-left" style="width:130px;position:relative; left:20px;">
            <select class="form-control"
                    style="height:26px;width: 130px;font-size:12px;line-height:25px;padding-top:0px;padding-bottom:0px;padding-left:6px;"
                    @change="getMoudleType" v-model="module">
                <option value="">请选择</option>
                <option v-for="item in moduleType" v-bind:value="item.moduleType">{{item.moduleType}}</option>
            </select>

        </div>

        <div class="pull-left" style="width:130px;position:relative; left:20px;">
            <select class="form-control"
                    style="height:26px;width: 130px;font-size:12px;line-height:25px;padding-top:0px;padding-bottom:0px;padding-left:6px;"
                    v-model="id" @change="getById">
                <option value="" selected>请选择</option>
                <option v-for="item in moduleChilder" v-bind:value="item.id">{{item.key}}</option>
            </select>

        </div>


        <table class="table-detail">
            <tr>
                <td class="td-title" style="width:33%;">KEY</td>
                <td><input type="text" v-model="moduleEnum.key"/></td>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">VALUE</td>
                <td><input type="text" v-model="moduleEnum.value"/></td>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">排序</td>
                <td><input type="text" v-model="moduleEnum.sortNo"/></td>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">备注</td>
                <td><input type="text" v-model="moduleEnum.remark"/></td>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">模块</td>
                <td><input type="text" v-model="module"/></td>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">删除</td>
                <td @click="deleteById"><a>删除</a></td>
            </tr>
            <tr>

                <td>
                    <input type="button" value="新建" class="btn btn-primary" @click="newOne" style="margin: 5px 0;"/>
                </td>
                <td>
                    <input type="button" value="保存" class="btn btn-primary" @click="save" style="margin: 5px 0;"/>
                </td>
            </tr>
        </table>
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            module: '',
            moduleType: [],
            moduleChilder: [],
            id: '',
            moduleEnum: {
                id: '',
                key: '',
                value: '',
                remark: '',
                sortNo: 0,
                module:'',
            },
        },
        mounted: function () {
            var that = this;
            /*获取公司下拉列表*/
            $.wyui.postMethod('/enum2/moduleTypeList.json', {}, function (r) {
                console.log(r);
                that.moduleType = r;
            });
        },
        methods: {
            getMoudleType: function () {
                var that = this;
                var module = that.module;
                if (module != '' && module != '请选择') {
                    var data = {'moduleType': module};
                    $.wyui.postMethod('/enum2/selectByModuleType.json', data, function (r) {
                        console.log(r);
                        that.moduleChilder = r;
                    })
                }

            },
            getById: function () {
                var that = this;
                that.moduleEnum.id = '';
                that.moduleEnum.key = '';
                that.moduleEnum.value = '';
                that.moduleEnum.remark = '';
                that.moduleEnum.sortNo = 0;
                if (that.id != '') {
                    var data = {id: that.id};
                    $.wyui.postMethod('/enum2/getById.json', data, function (r) {
                        console.log(r);
                        that.moduleEnum = r;
                    })
                }

            },
            save: function () {
                var that = this;

                var updateData = {
                    id: that.id,
                    key: that.moduleEnum.key,
                    value: that.moduleEnum.value,
                    remark: that.moduleEnum.remark,
                    sortNo: that.moduleEnum.sortNo,
                    moduleType: that.module
                };

                $.wyui.postMethod('/enum2/save.json', updateData, function (r) {
                    console.log(r);
                    /*that.moduleEnum = r;*/

                    $.wyui.postMethod('/enum2/moduleTypeList.json', {}, function (r) {
                        console.log(r);
                        that.moduleType = r;
                    });
                    if (that.module != '' && that.module != '请选择') {
                        var data = {'moduleType': that.module};
                        $.wyui.postMethod('/enum2/selectByModuleType.json', data, function (r) {
                            console.log(r);
                            that.moduleChilder = r;
                        })
                    }
                })


            },
            newOne: function () {
                var that = this;

                var newData = {
                    key: that.moduleEnum.key,
                    value: that.moduleEnum.value,
                    remark: that.moduleEnum.remark,
                    sortNo: that.moduleEnum.sortNo,
                    moduleType: that.module
                };

                $.wyui.postMethod('/enum2/save.json', newData, function (r) {
                    console.log(r);
                    /*that.moduleEnum = r;*/
                    $.wyui.postMethod('/enum2/moduleTypeList.json', {}, function (r) {
                        console.log(r);
                        that.moduleType = r;
                    });
                    if (that.module != '' && that.module != '请选择') {
                        var data = {'moduleType': that.module};
                        $.wyui.postMethod('/enum2/selectByModuleType.json', data, function (r) {
                            console.log(r);
                            that.moduleChilder = r;
                        })
                    }
                })


            },
            deleteById: function () {
                var that = this;
                that.module='';
                that.moduleEnum.key = '';
                that.moduleEnum.value = '';
                that.moduleEnum.remark = '';
                that.moduleEnum.sortNo = 0;
                var date = {id: that.id};

                $.wyui.postMethod('/enum2/delById.json', date, function (r) {
                    console.log(r);
                    /*that.moduleEnum = r;*/
                    $.wyui.postMethod('/enum2/moduleTypeList.json', {}, function (r) {
                        console.log(r);
                        that.moduleType = r;
                    });
                    var data = {'moduleType': that.module};
                    $.wyui.postMethod('/enum2/selectByModuleType.json', data, function (r) {
                        console.log(r);
                        that.moduleChilder = r;
                    })
                })


            },
        }

    });

</script>

</body>
</html>